<template>
  <div>
    <el-container>

      <!--顶栏容器-->
      <el-header>
        <h1>部门领导审批</h1>
      </el-header>

      <!--主要容器区域-->
      <el-main>
        <!-- el-collapse 折叠面板 -->
        <!-- el-collapse accordion 手风琴模式 -->
        <el-collapse v-model="activeName" accordion>
          <template v-for="(depart,index) in searchDatas">
            <div
              v-if="(depart.status == '审核一') || (depart.status == '审核二' && (depart.departLeader == '' || depart.departLeader == null))"
              @click="details_list(index, searchDatas)"
              :key="index">
              <!-- el-collapse-item :name 标识名-->
              <!-- el-collapse-item :title 标题内容-->
              <!-- v-for 迭代 数组、对象、对象数组、数字 -->
              <el-collapse-item :name=depart.id :title=depart.requisitionId>
                <el-card>
                  <!--后端完成后 最后添加v-loading="loading"，  itemKey 需要是变化的 -->
                  <!-- fit 列宽自动扩展 -->
                  <!-- show-header 是否显示表头 -->
                  <!-- border 是否添加竖直的边框 -->
                  <el-table
                    :key="index"
                    ref="materialTable"
                    :row-class-name="tableRowClassName"
                    @row-click = "onRowClick"
                    :data=materialDatas
                    :fit="true"
                    :show-header="true"
                    border="true">
                    <!--v-if="depart.requisitionId == materialDatas.requisitionId"-->
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column prop="id" label="id" sortable="true" v-if="false"></el-table-column>
                    <el-table-column prop="name" label='物料名称'></el-table-column>
                    <el-table-column prop="specification" label="型号及规格"></el-table-column>
                    <el-table-column prop="unit" label="计量单位"></el-table-column>
                    <el-table-column prop="dueNum" label="申请数量"></el-table-column>
                    <el-table-column prop="reamrk" label="备注"></el-table-column>
                    <el-table-column prop="price" label="价格"></el-table-column>

                    <el-table-column fixed="right" width="200px">
                      <template slot="header">
                        <!--如果要将页面1 test.vue的作为独立的组件应用在另一个页面上2上，并需要以弹框形式打开，可在页面2上直接引入，在页面2中使用el-popover组件-->
                        <el-popover placement="left" width="600px" trigger="click">

                          <!-- data="materialDatas.slice((mcurrentPage-1)*mpageSize,mcurrentPage*mpageSize)" -->
                          <!--  -->
                          <el-table :data=acceptDatas>
                            <el-table-column width="200" property="name" label="物料名称"></el-table-column>
                            <el-table-column width="200" property="specification" label="型号及规格"></el-table-column>
                            <el-table-column width="200" property="unit" label="单位"></el-table-column>
                            <el-table-column width="200" property="type" label="物料类型"></el-table-column>
                            <el-table-column width="200" property="billNum" label="库存数量"></el-table-column>
                          </el-table>

                          <!-- 分页器 -->
                          <!-- @size-change事件 来处理页码大小-->
                          <!-- @current-change事件 来处理当前页变动时候触发的事件-->
                          <!-- :current-page 当前页面-->
                          <!-- layout 表示需要显示的内容，用逗号分隔，布局元素会依次显示。 -->
                          <!-- :total 总页数-->
                          <div class="block" style="margin-top: 15px;">
                            <el-pagination
                              @size-change="handleSizeChange"
                              @current-change="handleCurrentChange"
                              :current-page="mcurrentPage"
                              :page-sizes="[10, 15, 20, 25]"
                              :page-size="mpageSize"
                              layout="total, prev, pager, next, jumper"
                              :total="mtotal">
                            </el-pagination>
                          </div>
                          <!-- slot 还不知道什么意思 -->
                          <el-button slot="reference" @click="accept_list(index, searchDatas)">查询物料信息表</el-button>
                        </el-popover>
                      </template>

                      <template slot-scope="scope">
                        <!-- scope.$index 和 currentRowIndex（用函数） 都能获得table当前索引值 -->
                        <el-button
                          mc-type="column-el-button"
                          size="mini"
                          type="primary"
                          @click="handleEdit(scope.$index, materialDatas)">
                          编 辑
                        </el-button>
                        <el-button
                          mc-type="column-el-button"
                          size="mini"
                          type="danger"
                          @click="handleDelete(scope.$index, materialDatas)">
                          删 除
                        </el-button>
                      </template>

                    </el-table-column>
                  </el-table>

                  <el-pagination style="margin-left: -5px;" layout="prev,pager,next" :total="pageTotal" :current-page.sync="currentPage"></el-pagination>

                  <div style="float: left ">
                    <el-button-group>
                      <el-button id="uuid00cd079a-755c-442a-b271-d40912245531" @click="pass_audit(index, searchDatas)" type="primary">审 核</el-button>
                      <el-button id="uuid00cd079a-755c-442a-b271-d40912245532" @click="fail_audit(index, searchDatas)" type="warning">打 回</el-button>
                    </el-button-group>
                  </div>
                  <div style="float: right">
                    <el-tag type="warning">申请日期: {{ applyTime }} </el-tag> <!--类型为警告的标签-->
                  </div>
                </el-card>
              </el-collapse-item>
            </div>
          </template>
        </el-collapse>
      </el-main>
    </el-container>

    <!--编辑修改信息弹窗-->
    <!-- el-dialog 对话框 -->
    <el-dialog title="修改信息" :visible.sync="editFormVisible" :before-close="handleEditClose" width="30%">
      <el-form class="action-form" :model="updForm" label-width="100px">
        <el-form-item label="物资名称">
          <el-input :placeholder="updForm.name" :disabled="true" />
        </el-form-item>
        <el-form-item label="采购数量">
          <el-input v-model="updForm.dueNum" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="updForm.reamrk" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleEditClose()">取 消</el-button>
        <el-button type="primary" @click="updFormConfirm()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { selectAll, SelectById, SelectByAccId, auditPassed, departPassed, auditFailed, removeMater, editMater } from '@/api/material-delivery/department-audit'

export default {
  data() {
    return {
      searchDatas: [],
      materialDatas: [], //
      acceptDatas: [], //
      passAudit: '完成', // 审批完成后领导名字（完成 或 领导名字）
      applyTime: '', // 申请时间
      currentRowIndex: '', // materialDatas的索引
      tableData: [], //  记录每个部门的 物料信息表
      activeName: '1',
      mcurrentPage: 1, //  物料信息表当前页码
      mtotal: 20, //  初始化总条数
      mpageSize: 10, //  物料信息表每页的数据条数
      editFormVisible: false, //  编辑物料窗口
      updForm: { //  初始化 编辑窗口
        index: '',
        id: '',
        requisitionId: '',
        name: '',
        specification: '',
        unit: '',
        dueNum: '',
        actualNum: '',
        price: '',
        tax: '',
        reamrk: ''
      },
      insFormVisible: false, //  添加物料窗口
      pageTotal: '',
      currentPage: '',
      insForm: {
        materialName: '',
        purchaseNum: '',
        partUsed: '',
        remark: ''
      },
      headers: {
        Authorization: getToken
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      selectAll().then((response) => {
        this.searchDatas = response.data
      })
    },

    get_time(index, searchDatas) {
      this.applyTime = searchDatas[index].createtime.substring(0, 4) + '年'
      this.applyTime = this.applyTime + searchDatas[index].createtime.substring(5, 6) + '月'
      this.applyTime = this.applyTime + searchDatas[index].createtime.substring(7, 8) + '日'
    },

    details_list(index, searchDatas) {
      SelectById(searchDatas[index].requisitionId).then((response) => {
        this.materialDatas = response.data
      })
      this.get_time(index, searchDatas)
    },

    accept_list(index, searchDatas) {
      SelectByAccId(searchDatas[index].acceptId).then((response) => {
        this.acceptDatas = response.data
      })
    },

    pass_audit(index, searchDatas) {
      this.$confirm('确定通过该申请吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (searchDatas[index].status === '审核一') {
          auditPassed(searchDatas[index].requisitionId).then((response) => { // then是修改成功
            this.$message.success('审核成功')
            this.loading = true
            this.init()
          }).catch((error) => { // catch是修改失败
            console.log(error)
          })
        }
        if (searchDatas[index].status === '审核二') {
          departPassed(searchDatas[index].requisitionId).then((response) => { // then是修改成功
            this.$message.success('审核成功')
            this.loading = true
            this.init()
          }).catch((error) => { // catch是修改失败
            console.log(error)
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消审核'
        })
      })
    },

    fail_audit(index, searchDatas) {
      this.$confirm('确定打回该申请吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        auditFailed(searchDatas[index].requisitionId).then(() => { // then是修改成功
          this.$message.success('打回成功')
          this.loading = true
          this.init()
        }).catch((error) => { // catch是修改失败
          console.log(error)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消打回'
        })
      })
    },

    // 确定materialDatas的索引
    tableRowClassName({ row, rowIndex }) {
      row.row_index = rowIndex
    },

    onRowClick(row, event, column) {
      this.currentRowIndex = row.row_index
    },

    handleDelete(index, materialDatas) {
      console.log(materialDatas[index].id)
      this.$confirm('确定删除该物品吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        removeMater(materialDatas[index].id).then(() => { // then是修改成功
          this.$message.success('删除成功')
          this.loading = true
          this.init()
        }).catch((error) => { // catch是修改失败
          console.log(error)
          this.$message({
            type: 'info',
            message: '删除失败'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // 编辑物料信息
    handleEdit(index, materialDatas) {
      this.editFormVisible = true
      this.updForm.index = index
      this.updForm.id = materialDatas[index].id
      this.updForm.requisitionId = materialDatas[index].requisitionId
      this.updForm.name = materialDatas[index].name
      this.updForm.specification = materialDatas[index].specification
      this.updForm.unit = materialDatas[index].unit
      this.updForm.dueNum = materialDatas[index].dueNum
      this.updForm.actualNum = materialDatas[index].actualNum
      this.updForm.price = materialDatas[index].price
      this.updForm.tax = materialDatas[index].tax
      this.updForm.reamrk = materialDatas[index].reamrk
    },

    // 取消、关闭修改物料界面
    handleEditClose() {
      this.editFormVisible = false
      this.updForm.id = ''
      this.updForm.requisitionId = ''
      this.updForm.name = ''
      this.updForm.specification = ''
      this.updForm.unit = ''
      this.updForm.dueNum = ''
      this.updForm.actualNum = ''
      this.updForm.price = ''
      this.updForm.tax = ''
      this.updForm.reamrk = ''
      this.$message({
        type: 'info',
        message: '已取消修改'
      })
    },

    // 确认修改材料信息
    updFormConfirm() {
      this.editFormVisible = false
      console.log(this.updForm)
      editMater(
        this.updForm.id,
        this.updForm.requisitionId,
        this.updForm.name,
        this.updForm.specification,
        this.updForm.unit,
        this.updForm.dueNum,
        this.updForm.actualNum,
        this.updForm.price,
        this.updForm.tax,
        this.updForm.reamrk
      ).then(() => {
        this.updForm.id = ''
        this.updForm.requisitionId = ''
        this.updForm.name = ''
        this.updForm.specification = ''
        this.updForm.unit = ''
        this.updForm.dueNum = ''
        this.updForm.actualNum = ''
        this.updForm.price = ''
        this.updForm.tax = ''
        this.updForm.reamrk = ''
        this.$message.success('修改成功')
        this.loading = true
        this.init()
      })
    }
  }
}
</script>

<style scoped>
</style>
